6 Tips for Product Photos on Listing Pages6 個關於商品列表頁面產品照片的小貼士

產品列表頁面(包括搜尋結果頁面)是電商網站上促成使用者購買決策的關鍵環節。透過展示清晰、風格統一、相關性強、動態、情境化且包容性高的商品照片,可以幫助使用者快速瀏覽、比較商品,甚至直接下單。以下是最佳化商品照片的6個關鍵建議。

1. 照片尺寸:足夠大(Large)

確保照片中的商品佔據主要空間,減少不必要的背景,特別是在移動端。

Home Depot 產品列表頁面上的圖片足夠大且詳細,使使用者能夠辨別特定的產品特徵。
Helmut Lang 的全身模特照片雖然尺寸較大,但由於白色背景和模特全身展示,導致單品細節難以辨認,尤其是在移動端。

Helmut Lang 使用了較大的照片尺寸,但全身照未能充分展示每件物品的細節,在移動端尤其如此。

2. 照片風格:保持一致性(Consistent)

產品照片應在風格上保持一致,便於使用者快速掃描和比較商品。這並不意味著所有圖片需要完全相同,而是應在以下方面做到統一:

Stuart Weitzman 的鞋子展示全部採用白色背景、閃光燈拍攝和側面視角,幫助使用者快速判斷鞋跟高度。

Aritzia 的照片雖風格多樣,但透過統一的時尚雜誌風格(城市背景、創意姿勢)保持了視覺一致性。
儘管賣家眾多,但亞馬遜確保其商品列表頁面上的產品圖片看起來大致一致。
亞馬遜的產品圖片網站標準概述了其產品照片的風格,賣家必須遵守。

3. 照片相關性:體現使用者需求(Specific)

確保商品照片與使用者的搜尋關鍵詞或篩選條件匹配,增強使用者對結果的信任感。

REI 的“綠色水壺”搜尋結果中,儘管許多商品有綠色款,但圖片並未展示綠色版本。
DSW 在使用者搜尋“紅色涼鞋”時,返回的商品均顯示紅色款的縮圖。

4. 照片動態:多視角展示(Dynamic)

避免快速切換造成的閃爍效果,設定適當的動畫延遲,確保只在使用者明確展示意圖時更換圖片。

Lulus.com 在使用者懸停時展示商品的背面圖、材質細節或另一模特的試穿效果,增加了圖片的實用性。
對於其他縮圖,將滑鼠懸停在預設縮圖影象(左)上會顯示出該連衣裙的背面(右)。

5. 照片情境:增加使用場景(Contextual)

對於中小型商品目錄,優先採用多樣化模特展示商品效果。

在商品列表頁提供切換模特的選項,幫助使用者在不用進入詳情頁的情況下檢視商品上身效果。

Mignon Faget 的珠寶照片只顯示了特寫,沒有展示佩戴效果,導致使用者缺乏直觀感受。
蒂芙尼(Tiffany's)展示了其戒指在白色背景下的特寫照片。但蒂芙尼的方法效果更好,因為當滑鼠懸停時,可以顯示戒指戴在模特手上的照片。

6. 照片包容性:體現多樣化(Inclusive)

透過展示不同年齡、種族、體型的模特,電商網站可以體現包容性價值觀,同時幫助使用者更好地預期商品在自身條件下的效果。

Good American 提供多種尺碼模特(如 0、8 和 16 號)供使用者選擇觀看。
Glossier 在化妝品頁面展示每種產品在不同膚色下的效果,大大增強了使用者的購買信心。